<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="description" content="基于webpack5集成react18、mobx、router6、i18多语言、tailwindcss以及css换肤的简易框架"/>
    <meta name="keywords" content="webpack5,mobx,router6,i18,css换肤,tailwindcss,代码提交规范,代码提交前检查,简易框架"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-page-mode" content="app" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="full-screen" content="yes" />
    <meta name="browsermode" content="application" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="apple-mobile-web-app-title" content="北极28" />
    <meta content="default" name="apple-mobile-web-app-status-bar-style" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <meta http-equiv="expires" content="0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="googlebot" content="noindex,noarchive" />
    <meta name="theme-color" content="#fff" />
    <meta name="robots" content="noindex,noarchive" />
    <title>mobel 模板</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #box {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #manhua {
            border: 0;
            overflow: auto;
            transform-origin: top right;
            display: block;   
        }
    </style>
  </head>
  <body>
    <div id="box">
        <iframe
          width='100%'
          height='100%'
          title='manhua'
          name='manhua'
          id="manhua"
          src=''
        ></iframe>
    </div>
    <noscript></noscript>
    <script>
        // 获取URL参数的函数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
            results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        let url =''
        let IsVertical = null
        // 定义得到横竖屏的变量
        let isScreenH = false
        // 获取iframe标签  
        const iframe = document.getElementById('manhua');
 
        // 页面加载完成后执行
        window.onload = function() {
            url = getUrlParameter('url');
            IsVertical = getUrlParameter('IsVertical');
            iframe.setAttribute('src', url)
            orientation();  
        };
        
        // 定义切换的逻辑
        function orientation() {
            console.log({IsVertical})
            if ((IsVertical === '1' && window.innerWidth > window.innerHeight)) {
                // 横屏时的处理
                iframe.style.width = window.innerHeight + 'px'
                iframe.style.height = window.innerWidth + 'px'
                iframe.style.transform = `rotate(270deg) translateY(-${window.innerHeight}px)`
            } else {
                iframe.style.width = '100%'
                iframe.style.height = '100%'
                iframe.style.transform = 'rotate(0deg)'
            }
        }
        
        window.addEventListener('resize', orientation);
    </script>
  </body>
</html>
